<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            /*background: cornsilk;*/
        }

        form{
            margin:80px auto 0;
            padding-bottom:50px;
        }
        form .input-row{
            padding-left: 80px;
            position: relative;
            line-height: 40px;

        }
        form .input-row label{
            display:inline-block;
            width: 68px;
            text-align: right;
            margin-left:300px;

        }
        form .input-row input{
            height: 35px;
            border-radius: 4px;
            width:300px;
            overflow: hidden;
            border: 1px solid #ddd;
            text-indent: 10px;
        }
        #submit{
            width:370px;
            background-color: #c61012;
            color: #fff;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            margin: 20px 0 0 380px;
            font-size: 18px;
            text-align:center;
            display: block;
            text-decoration: none;
        }
        #submit:active{
            background-color: #0c8dbc;
        }
        .mmqd{
            width: 290px;
            height: 30px;
            background-color:rgba(255, 120, 14, 0.58);
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 16px;
        }
        .active{
            background-color: #ff780e;
        }
        .mmqd em{
            display: inline-block;
            width: 33.333%;
            text-align: center;
            color: #fff;

        }

    </style>
</head>
<body>
<div id="top-part"></div>
<div class="container">
    <form action="base/home/register.action" method="post" id="form">
        <div class="input-row">
            <label>
                用户名
            </label>
            <input type="text" name="user.userName" id="name" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="nameRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                登录密码
            </label>
            <input type="password" name="user.password" id="password" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="passwordRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="mmqd" style="margin-left: 455px">
            <em class="active">弱</em><em>中</em><em>强</em>
        </div>
        <div class="input-row">
            <label>
                密码确认
            </label>
            <input type="password" id="passwordAgain" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="passwordAgainRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>

        <div class="input-row">
            <label>
                联系方式
            </label>
            <input type="text" name="user.mobile" id="mobile" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="mobileRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                E-mail
            </label>
            <input type="text" name="user.email" id="email" class="require">
            <span style="color: red;font-size: 20px"> *</span>
            <span id="emailRequierdSpan" class="requierdSpan" style="color: red;font-size: 20px"></span>
        </div>
        <div class="input-row">
            <label>
                QQ
            </label>
            <input type="text" name="user.qq">
        </div>
        <a href="javascript:void(0);" id="submit">立即注册</a>
    </form>
</div>


</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
</script>
<script type="text/javascript">
    $(function(){
        $("#name").blur(function() {
            var name = this.value;
            name = $.trim(name);
            if (name == "") {
                $("#nameRequierdSpan").text("用户名不能为空");
            } else {
                if(name.length<2 || name.length>10){
                    $("#nameRequierdSpan").text("用户名要在2到10位之间");
                }else{
                    $.get("base/home/checkName.action",{"_":new Date().getTime(),"user.userName":name},function(data){
                        var jsonArray = eval("(" + data + ")");
                        if(jsonArray.success){
                            $("#nameRequierdSpan").text("");
                        }else{
                            $("#nameRequierdSpan").text("用户名已经存在");
                        }
                    });
                }
            }
        });
        var aEm=document.getElementsByTagName('em');
        var pwd=document.getElementById("password");
        pwd.onkeyup=function(){
            if(this.value.length>6){
                aEm[1].className="active";
            }else {
                aEm[1].className="";
            }
            if(this.value.length>15){
                aEm[2].className="active";
            }else {
                aEm[2].className="";
            }
        }
        $("#password").blur(function() {
            var password=this.value;
            password=$.trim(password);
            if(password==""){
                $("#passwordRequierdSpan").text("密码不能为空");
            }else{
                if(password.length<6 || password.length>26){
                    $("#passwordRequierdSpan").text("密码要在6到26位之间");
                }else{
                    var regExp = /^[A-Za-z0-9]+$/;
                    var ok = regExp.test(password);
                    if(!ok){
                        $("#passwordRequierdSpan").text("密码不能含有特殊字符");
                    }else{
                        $("#passwordRequierdSpan").text("");
                    }
                }
            }
        });
        $("#passwordAgain").blur(function(){
            var passwordAgain=this.value;
            var password=$("#password").val();
            if(passwordAgain==password){
                $("#passwordAgainRequierdSpan").text("");
            }else{
                $("#passwordAgainRequierdSpan").text("确认密码与密码不符");
            }
        });
        $("#mobile").blur(function() {
            var mobile=this.value;
            mobile=$.trim(mobile);
            if(mobile==""){
                $("#mobileRequierdSpan").text("电话号码不能为空");
            }else{
                var regExp = /^(13[0-9]|15[0|1|3|6|7|8|9]|18[8|9])\d{8}$/;
                var ok = regExp.test(mobile);
                if(!ok){
                    $("#mobileRequierdSpan").text("电话号码格式不正确");
                }else{
                    $("#mobileRequierdSpan").text("");
                }
            }
        });
        $("#email").blur(function() {
            var email=this.value;
            email=$.trim(email);
            if(email==""){
                $("#emailRequierdSpan").text("邮箱不能为空");
            }else{
                var regExp = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                var ok = regExp.test(email);
                if(!ok){
                    $("#emailRequierdSpan").text("邮格式不正确");
                }else{
                    $("#emailRequierdSpan").text("");
                }
            }
        });
        $("#submit").click(function(){
            $(".require").blur();
            var flag=true;
            $.each($(".requierdSpan"),function(i,n){
                if(this.innerHTML!=""){
                    flag=false;
                    return false;
                }
            });
            if(!flag){
                $("#message").text("数据非法请检查!");
            }else{
                $("#form").submit();
            }
        });
    });
</script>
</html>